﻿<div class="x-nav">
    <span class="layui-breadcrumb">
        <a><cite>首页</cite></a>
        <a><cite>商品管理</cite></a>
        <a><cite>商品图片列表</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>


<div style="margin-top: 50px;margin-bottom:100px">
    <!--onsubmit="return false":禁止form提交数据-->
    <form class="layui-form" onsubmit="return false">
        <div class="layui-form-item">
            <!--用户名-->
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-inline">
                <input type="text" id="ProductName" class="layui-input" />
            </div>
            <!--点击搜索，重新加载了一次表格reload-->
            <button id="search" data-type="reload" class="layui-btn">搜索</button>
        </div>
    </form>
    <button class="layui-btn" id="create">新建商品</button>
    <table id="my_table" lay-filter="mjf"></table>

    <!--行内工具-->
    <script type="text/html" id="inline_tool">
        <button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</button>
    </script>
</div>
<style>
    .layui-table-cell {
        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }
</style>

@section Scripts{
    <script>
		layui.use(['table'], function() {
			var table = layui.table;
			var $ = layui.$;
			var layer = layui.layer;
			table.render({
				elem: "#my_table",
                url: "/Admin/Picute/list", //请求地址
				method: "get", //请求方式
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
				toolbar: "#top_tool", //挂载上顶部工具栏
				page: true, //是否开启分页limit：每页数据条数 page：当前第几页
				where: {

				},
				cols: [[{
				    type: 'checkbox'
				}, {
				    field: 'id',
				    title: 'Id',
				}, {
				    field: 'imgUrl',
				    title: '图片地址'
				}, {
				    field: 'imgUrl',
				    title: '图片',
				    templet: '<div><img src="/{{d.ImgUrl}}"</div>'

				}, {
                    field: 'productName',
				    title: '商品名称',
				},{
				    fixed: 'right',
				    title: '操作',
				    toolbar: '#inline_tool'
				}]]
			});

			//搜索
			var active = {
				reload: function() {
					//重新加载哪个表格
					table.reload('my_table', {
						where: {
                            ProductName: $("#ProductName").val(),
						}
					})
				}
			};
			//点击谁的时候重载表格
			$("#search").click(function() {
				//点击搜索的时候重新加载表格
				var type = $(this).data('type'); //获取此按钮的data-type
				//如果type不为空，点击此按钮进行重新加载
				active[type] ? active[type].call(this) : '';
			});
			//监听顶部工具栏的点击
            $("#create").click(function () {
                layer.open({
                    type: 2,
                    area: ['600px', '500px'],
                    content: 'Add' //这里content是一个普通的String
                });
            });
			//监听行内工具点击
			table.on('tool(mjf)',function(obj){
				console.log(obj);
				//拿这一行的数据
				var data=obj.data;
				if (obj.event == "edit") {
				    layer.open({
				        type: 2,
                        area: ['600px', '600px'],
				        content: 'Edit?Id='+data.id //这里content是一个普通的String
				    });
				}else if(obj.event=="del"){
					layer.confirm("真的删除吗？",function(index){
					    //点击确定的时候执行删除，ajax请求不跳转
					    $.ajax({
					        url: "DelPicutre",
					        type: "post",
					        dataType: "json",
					        data: {
                                Id:data.id
					        },
					        success: function (res) {
					            //删除成功，关闭当前弹窗
					            if (res.success == true) {
					                //关闭弹窗并刷新列表
					                layer.close(index);

					                location.reload();
					            } else {
                                    layer.msg(res.msg)
					            }
					        },
					        error: function (e) {
					            console.log(e);
					        }
					    })

					});
				}
			});

		});
    </script>
}
